<template>
  <div class="pay-result">
    <el-card class="result-card">
      <div class="result-icon">
        <i v-if="status === 'success'" class="el-icon-success success-icon"></i>
        <i v-else class="el-icon-error error-icon"></i>
      </div>
      
      <div class="result-title">
        <h2 v-if="status === 'success'">支付成功</h2>
        <h2 v-else>支付失败</h2>
      </div>
      
      <div class="result-info">
        <p>订单号：{{ orderNo }}</p>
        <p v-if="amount">金额：{{ amount }} 元</p>
        <p v-if="status === 'success'">感谢您的购买！</p>
        <p v-else>请稍后重试或联系客服</p>
      </div>
      
      <div class="result-actions">
        <el-button type="primary" @click="backToHome">返回首页</el-button>
        <el-button v-if="status !== 'success'" type="success" @click="retry">重新支付</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PayResult',
  data() {
    return {
      status: 'pending',
      orderNo: '',
      amount: ''
    }
  },
  created() {
    // 从路由参数获取支付状态和订单号
    this.status = this.$route.query.status || 'pending'
    this.orderNo = this.$route.query.orderNo || ''
    this.amount = this.$route.query.amount || ''
    
    // 如果没有状态参数，返回首页
    if (!this.status || !this.orderNo) {
      this.$router.push('/')
    }
  },
  methods: {
    backToHome() {
      this.$router.push('/')
    },
    retry() {
      // 返回支付页面重新支付
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.pay-result {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.result-card {
  width: 500px;
  text-align: center;
}

.result-icon {
  font-size: 72px;
  margin: 30px 0;
}

.success-icon {
  color: #67c23a;
}

.error-icon {
  color: #f56c6c;
}

.result-title {
  margin-bottom: 20px;
}

.result-info {
  margin-bottom: 30px;
  color: #606266;
}

.result-info p {
  margin: 10px 0;
}

.result-actions {
  margin-bottom: 20px;
}

.result-actions .el-button {
  margin: 0 10px;
}
</style> 